<template>
  <!-- 当选中频道 要显示在页面上 进行双向绑定 这里使用属性绑定（v-bind）和事件监听（v-on：）配合使用 -->
  <!-- 父组件里的内容给子组件 通过：value -->
  <!-- 子组件发生改变  通过@input给父组件 -->
  <el-select :value='value' @input="handleSelect" placeholder="请选择频道列表：">
    <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id"></el-option>
  </el-select>
</template>
<script>
import { loadChannelList } from '@/api/article.js'

export default {
  data () {
    return {
      channels: []
    }
  },
  name: 'MyChannel',
  // 父组件向子组件传值 只用props接收
  props: {
    // channels: {
    //   // 配置类型的目的是进行类型验证 如果不是这个类型就会报错
    //   type: Array
    // },
    value: {
      type: Number
    }
  },
  methods: {
    // 获取频道列表
    async loadChannelList () {
      try {
        const ret = await loadChannelList()
        console.log(ret)
        this.channels = ret.data.channels
      } catch (error) {
        console.log(error)
        this.$message.error('获取频道列表失败')
      }
    },
    handleSelect (id) {
      // 这里的input事件函数中获取到的直接就是选项的id
      // 这里选中的id 需要传递给父组件
      //   参数一 是代表自定义事件监听的名称 id是传递的值
      this.$emit('input', id)
    }
  },
  created () {
    this.loadChannelList()
  }
}
</script>
